<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <style>
        body{
            background-image: url("动态.gif");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }
        .layui-form{
            width: 400px;
            margin: 0 auto;
            margin-top: 150px;
            background-color: whitesmoke;
        }
        h1{
            text-align: center;
        }
    </style>
</head>
<body>
    <form class="layui-form">
        <h1>管理员登陆</h1>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline" style="width: 100px">
                <input type="text" name="vercode" placeholder="请输入验证码" class="layui-input">
            </div>
            <div>
                <img src="/vercode" id="vercode" style="cursor: pointer">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit lay-filter="login">登录</button>
            </div>
        </div>
    </form>
    <script>
         layui.use(['form'],function () {
             var form = layui.form,
                 $ = layui.$;

             //刷新验证码
             $('#vercode').click(function () {
                 $(this).attr("src","/vercode?t="+new Date().getTime())
             });
             //表单提交
             form.on('submit(login)',function (data) {
                 $.ajax({
                     url: '/api/admin/login',
                     data: data.field,
                     type: 'post',
                     dataType: 'json',
                     success: function (result) {
                         if(result.code === 0){
                             //成功,跳转到主页面
                             window.location.href='/';
                         }else{
                             layer.msg(result.msg);
                             //验证码输入框为空，刷新验证码
                             $('input[name="vercode"]').val('');
                             $('#vercode').attr('src',"/vercode?t="+new Date().getTime());
                         }
                     },
                     error: function () {
                         layer.msg("登陆失败");
                     }
                 });
                 return false;
             });
         });
    </script>
</body>
</html>